<blockquote className="layui-elem-quote">商品列表</blockquote>

<table id="goods-list" lay-filter="goods-list"></table>

<!--行工具条-->
<script type="text/html" id="goods-bar">
    <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="goods-pics">
    <!--使用layui的模板语言，遍历图片-->
    {{# layui.each(d.pics,function(index,item){ }}
        <img src="/upload/{{item.url}}" style="height: 50px;">
    {{# }); }}
</script>

<script>
    layui.use(['table'], function () {
        var table = layui.table,
            $=layui.$;
        table.render({
            elem: '#goods-list',
            url: '/api/goods',  //获取分类信息的操作
            page: true,
            cols: [[
                //每一个列的渲染方式
                {field: 'id', title: 'ID',},
                {field: 'name', title: '商品名',},
                {field: 'pics', title: '图片',templet:'#goods-pics'},
                {field: 'dscp', title: '描述',},
                {field: 'price', title: '售价',},
                {field: 'markPrice', title: '标价',},
                {field: 'color', title: '颜色',},
                {field: 'version', title: '版本',},
                {field: 'count', title: '库存',},
                {field: 'content', title: '内容',},
                {
                    field: 'recom', title: '主页推荐', templet: function (d) {
                        return ['不推荐', '推荐'][d.recom];
                    }
                },
                {
                    field: 'categoryId', title: '商品分类', templet: function (d) {
                        return d.category ? d.category.name : '';
                    }
                },
                {
                    field: 'status', title: '状态', templet: function (d) {
                        return ['上架', '下架'][d.status];
                    }
                },
                {title: '操作',toolbar:'#goods-bar'},

            ]],

            //数据解析
            parseData: function (d) {
                return {
                    code: d.code,
                    msg: d.msg,
                    count: d.data.total,
                    data: d.data.list,
                };
            },
        });

        table.on('tool(goods-list)',function (obj){
            if(obj.event == 'edit'){
                // layer.msg('这是编辑')
                // 向新页面传数据
                sessionStorage.setItem('goods-edit',JSON.stringify(obj.data));

                // 弹出层
                layer.open({
                    type:2,
                    title:'编辑分类',
                    area:['700px','600px'],
                    content:'/goods/edit.html', //页面的url
                    //获取一下弹出层的关闭然后伴随着表单的更新
                    end:function (){
                        table.reload('goods-list');
                    }
                });
            }else if(obj.event == 'del'){
                layer.confirm('确定要删除当前记录吗？',function (index){
                    layer.close(index);
                    //点击确定时的操作
                    //ajax /api/category  delete 传id 普通参数
                    $.ajax({
                        url:'/api/goods',
                        data:{id:obj.data.id},
                        type:'delete',
                        dataType:'json',
                        success:function (result){
                            if(result.code == 0){
                                layer.msg('删除成功');
                            }else{
                                layer.msg(result.msg);
                            }
                            //刷新表格
                            table.reload('goods-list');
                        },
                        error:function (){
                            layer.msg('请求失败');
                        },
                    });
                });
            }
        });

    });

</script>
